Skip to content

Document view: consistent view mode switch UX, better wrapping sidebar#607

Draft
hoyla wants to merge 5 commits intomainfrom
ljh-pageviewer-ux-1
Draft

Document view: consistent view mode switch UX, better wrapping sidebar#607
hoyla wants to merge 5 commits intomainfrom
ljh-pageviewer-ux-1

Conversation

@hoyla
Copy link
Contributor

@hoyla hoyla commented Mar 13, 2026 •
edited
Loading

Probably best not to look at this until #606 is merged, because removing the "View as Text" button will make that problem worse.

Previously, documents with pages (PDFs) used the PageViewer (Combined view) but had no way to switch to other views (e.g. Text, OCR, Preview) without navigating to the old viewer. The "View as Text" button in the sidebar opened a separate tab and had no return journey.

This PR rewrites PageViewerOrFallback as a view orchestrator that renders a PreviewSwitcher toolbar at the bottom of the viewport, giving access to all available views (Combined, Text, OCR, Preview, Table) in a single unified interface. This makes the UI consistent with all documents that don't have pages.

I think it still deserves to be called "PageViewerOrFallback" because we still fall back to the old views if for some reason we have earlier failed to generate pages.

So now...

  • Paged documents always land on the Combined view, even when arriving from search with a ?view=ocr.english parameter. (Search probably shouldn't make document rendering decisions anyway, but that question deserves deeper consideration. And I didn't want to mess with the backend for this PR.)
  • The 'Combined' button only appears for documents for which we have generated discrete pages.
  • If the doc is an audio or video, we use that term on the button rather than 'Preview'
  • The "View as Text" button has been removed from the sidebar since the footer toolbar now provides access to all view modes.
  • All view modes now share the same dark background, matching the existing old viewer. Previously the Combined view had a light background which made the footer toolbar look visually detached.
  • Sidebar action buttons (Add to Workspace, Download, Delete, Admin delete) now wrap within the sidebar instead of overflowing and being cropped
  • Location breadcrumb paths can now wrap to use the full sidebar width (removed white-space: nowrap)
  • Breadcrumb segment truncation threshold increased from 15 to 26 characters to show more useful path information. Twenty-six characters is sufficient for a useful display of automated ingestion names, e.g. "Upload 2026-03-13T12:52:15.905Z" was previously truncated to "Upload 2026-03-..."; it's now truncated to "Upload 2026-03-13T12:52:15..."

Before (1) – in combined viewer mode

Picture 63 Note the lack of any view option except "View as text"

Before (2) – after user clicks on View as text button

Picture 64 Note that now there's no option to return to the combined view

After

Picture 62
  • Sidebar: buttons not cropped
  • Sidebar: paths more readable
  • The user can switch back and forth across different view modes at will using the view buttons below the view.

Issue with searches proposing the wrong view mode

The buildLink utility previously carried the view URL param into all generated links. This meant clicking a search result while viewing a document in OCR mode would land the next document on OCR too. The view param is document-specific and should not propagate — view state is managed through Redux and PreviewSwitcher, which sets an appropriate default when each document loads. Refreshing the page now preserves the user's chosen view rather than resetting to a different view to the one the user had open.

This change in particular probably deserves some proper testing effort.

Files changed

  • PageViewerOrFallback.tsx — rewritten as view orchestrator with Redux connection
  • buildLink.js – no longer specifies the view mode; instead lets PageViewerOrFallback decide.
  • PreviewSwitcher.js — added Combined button and totalPages prop; changes Preview button if audio or video
  • DocumentMetadata.js — removed "View as Text" button
  • _buttons.scss — flex-wrap and gap on btn-group
  • _resource-browser.scss — removed nowrap on breadcrumb segments
  • ResourceTrail.tsx — increased truncation threshold

New file

  • PreviewSwitcher.spec.ts — tests for button naming based on mimetype

Testing

  • Basic tests on local
  • Basic tests on playground
  • Edge cases tested on playground

Not covered by this PR:

@hoyla hoyla added document viewer ux/ui maintenance Departmental tracking: maintenance work, not a fix or a feature labels Mar 13, 2026
@hoyla hoyla force-pushed the ljh-pageviewer-ux-1 branch from 58d21dc to 58f0b99 Compare March 13, 2026 15:39
hoyla added 3 commits March 13, 2026 15:47
@hoyla
Integrate Combined view with Text/OCR/Preview views
3fba61f 
Rewrite PageViewerOrFallback as a view orchestrator that renders
different content based on the active view mode (Combined, Text, OCR,
Preview, Table) with a shared PreviewSwitcher footer toolbar.

- Add Combined button to PreviewSwitcher when document has pages
- Always land on Combined view for paged documents, overriding any
  view param carried from search URLs
- Pin footer toolbar to bottom of viewport with scrollable content area
- Remove the standalone 'View as Text' button from DocumentMetadata
  since the PreviewSwitcher now provides access to all view modes
@hoyla
Use consistent dark background for all document views
e2dd657 
Apply the same dark background (previewDark) to the paged document
viewer wrapper so that all view modes (Combined, Text, OCR, Preview)
have a consistent appearance and the footer toolbar does not appear
visually detached from the content area.
@hoyla
Improve sidebar text flow and button wrapping
919d7ee 
- Allow action buttons to wrap within the sidebar by adding flex-wrap
  and gap to btn-group, preventing overflow cropping
- Remove white-space: nowrap from resource breadcrumb segments so
  location paths can use the full sidebar width
- Increase breadcrumb segment truncation threshold from 15 to 26
  characters to show more useful path information
@hoyla hoyla force-pushed the ljh-pageviewer-ux-1 branch from 58f0b99 to 919d7ee Compare March 13, 2026 15:47
hoyla added 2 commits March 13, 2026 15:57
@hoyla
Stop carrying view param across navigation links
59911bd 
Remove the block in buildLink that propagated urlParams.view into
generated links. The view param is document-specific (e.g. text, ocr,
preview) and should not carry forward when navigating between pages.

Previously this caused search result links to include the current
view mode, so clicking a result while on an OCR view would land the
next document on OCR instead of letting it choose its own default.

View state is managed through Redux and the PreviewSwitcher component
which sets an appropriate default when a document loads, so URL-based
propagation is no longer needed.

Also simplify the useEffect in PageViewerOrFallback to only set the
combined view when no view is set, and include view in the dependency
array (removing the eslint suppression). On refresh the user's chosen
view is preserved since it remains in Redux.
@hoyla
Use context-aware label for preview button based on mime type
ec9a951 
The PreviewSwitcher previously always labelled the preview tab 'Preview',
which is misleading for audio and video files. The resource's mimeTypes
are already available in the component, so we now derive the label from
them: 'Video' for video/* types, 'Audio' for audio/* types, and 'Preview'
as the default for PDFs, images, etc.

The label logic is extracted into a pure exported function
(previewLabelForMimeTypes) with a colocated test covering video, audio,
non-media, and mixed mime type scenarios.
This was referenced Mar 14, 2026
Draft
Open
@hoyla hoyla self-assigned this Mar 14, 2026
@hoyla hoyla force-pushed the ljh-pageviewer-ux-1 branch from dee3143 to ec9a951 Compare March 14, 2026 13:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@hoyla hoyla

Labels

document viewer maintenance Departmental tracking: maintenance work, not a fix or a feature ux/ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hoyla